<template>
    <div class="m-playbar" v-if="$store.state.playListInfo && playList">
        <div class="container">
            <div class="flex">
                <div class="btns flex align-center">
                    <span @click="prev" class="prv" title="上一首(ctrl+←)">上一首</span>
                    <span @click="changePlay" :class="'ply j-flag '+(playState?'pas':'')" title="播放/暂停(p)">播放/暂停</span>
                    <span @click="next" class="nxt" title="下一首(ctrl+→)">下一首</span>
                </div>
                <div class="flex align-center">
                    <img :src="playList.al.picUrl" alt="">
                    <div class="play">
                        <div class="songName">{{playList.name}} <span>{{playList.ar[0].name}}</span></div>
                        <div class="m-pbar flex align-center"><!-- 进度条 -->
                            <div class="barbg j-flag" @click="changeTime">
                                <div class="rdy"></div>
                                <div class="cur" :style="{width:w+'%'}">
                                    <span class="btn f-tdn f-alpha"><i></i></span>
                                </div>
                            </div>
                            <span class="j-flag time">
                                <em class="font-normal">{{currentTime}}</em> / {{durationTime}}
                            </span>
                        </div>
                    </div>
                </div>
                <Share></Share>
                <Lyric :id='playList.id' :currentTime='changeCurrentTime'></Lyric>
                <audio 
                    :src="playList.url" 
                    autoplay
                    ref="audio"
                    @timeupdate="playing">
                </audio>
            </div>
        </div>
    </div>
</template>

<script>
import {numToTime,formatNumber} from '../utils'// 时间转换工具
import Share from './Share'//分享
import Lyric from './Lyric'//歌词
export default {
    data() {
        return {
            currentSong:'',
            url:'',
            duration:0,
            durationTime:formatNumber(0),
            currentTime:formatNumber(0),
            w:0,
            playState:false
        }
    },
    components:{
        Share,
        Lyric
    },
    computed:{
        changeCurrentTime(){
            return this.currentTime
        },
        playList(){// 计算属性 播放当前第几首歌曲 
            if(this.$store.state.playListInfo){
                let {idx,playList}=this.$store.state.playListInfo
                this.currentSong=playList[idx]
                this.playState=true//设置播放状态
                if(!this.currentSong.url){
                    this.$toast('歌曲url连接失效')
                }
                console.log(this.currentSong);
                return this.currentSong
            }
        }
    },
    mounted(){
        
    },
    methods:{
        changeTime(e){//改变播放进度 
            this.$refs.audio.currentTime=e.offsetX/493*this.duration
        },
        changePlay(){//改变播放状态
            if(this.playState){
                this.$refs.audio.pause()
            }else{
                this.$refs.audio.play()
            }
            this.playState=!this.playState
        },
        prev(){
            let {idx,playList}=this.$store.state.playListInfo
            if(this.$store.state.playListInfo.idx<1){
                this.$store.state.playListInfo.idx=playList.length-1
            }else{
                this.$store.state.playListInfo.idx--
            }
            this.url=playList[this.$store.state.playListInfo.idx].url
        },
        next(){//下一首 
            let {idx,playList}=this.$store.state.playListInfo
            // 如果大于播放列表长度就归零 
            if(this.$store.state.playListInfo.idx>=playList.length-1){
                this.$store.state.playListInfo.idx=0
            }else{
                this.$store.state.playListInfo.idx++
            }
            this.url=playList[this.$store.state.playListInfo.idx].url
            // console.log(this.song_index,9999);
        },
        playing(e){
            // console.dir(e.target);
            this.duration=e.target.duration//总时长
            this.durationTime=numToTime(e.target.duration)//格式化总时长
            this.currentTime=numToTime(e.target.currentTime)//格式化当前播放时间
            this.w=e.target.currentTime/e.target.duration*100//设置当前播放进度条
            if(e.target.currentTime>=e.target.duration){
                this.next()// 自动播放下一首 调用next 方法
            }
        }
    }
}
</script>

<style lang='scss' scoped>
    .m-playbar{
        width: 100%;
        height: 53px;
        position: fixed;
        bottom: 0;
        z-index: 9;
        color:#fff;
        background: #333;
        box-shadow: 0 -5px 3px rgba(0,0,0,0.2);
        .container{
            height: 53px;
            img{
                width: 40px;
                height: 40px;
                border-radius: 50%;
            }
            .play{
                height: 40px;
                margin-left: 10px;
                .songName{
                    span{
                        margin-left: 15px;
                        color: #999;
                    }
                }
            }
        }
    }
    // 暂停播放按钮
    .m-playbar .updn .left, .m-playbar .updn .right, .m-playbar .updn .btn, .m-playbar .bg, .m-playbar .btns span, .m-playbar .head .mask, .m-playbar .icn, .m-playbar .ctrl, .m-playbar .tip, .m-vol .curr, .m-playbar .words .mv, .m-vol .barbg, .m-playbar .words .src {
        background: url(../assets/playbar.png) no-repeat 0 9999px;
    }

    .m-playbar .btns {
        width: 137px;
        height: 53px;
    }

    .m-playbar .btns span {
        display: block;
        width: 28px;
        height: 28px;
        margin-right: 8px;
        margin-top: 5px;
        text-indent: -9999px;
    }

    .m-playbar .btns .prv {
        background-position: 0 -130px;
    }

    .m-playbar .btns .prv:hover {
        background-position: -30px -130px;
    }

    .m-playbar .btns .ply {
        width: 36px;
        height: 36px;
        margin-top: 0;
        background-position: 0 -204px;
    }

    .m-playbar .btns .ply:hover {
        background-position: -40px -204px;
    }

    .m-playbar .btns .pas {
        background-position: 0 -165px;
    }

    .m-playbar .btns .pas:hover {
        background-position: -40px -165px;
    }

    .m-playbar .btns .nxt {
        background-position: -80px -130px;
    }

    .m-playbar .btns .nxt:hover {
        background-position: -110px -130px;
    }

    // 进度条
    .m-pbar {
        position: relative;
        *zoom: 1;
    }

    .m-pbar{

    }
    .m-pbar .barbg {
        width: 493px;
        margin-top: 8px;
        position: relative;
    }

    .m-pbar-vol,
    .m-pbar-vol .barbg {
        width: 78px;
    }

    .m-pbar .barbg,
    .m-pbar .cur,
    .m-pbar .rdy {
        height: 9px;
        background: url(../assets/statbar.png) no-repeat 0 9999px;
        background-position: right 0;
    }

    .m-pbar .rdy {
        background-position: right -30px;
    }

    .m-pbar .cur {
        position: absolute;
        top: 0;
        left: 0;
        width: 1%;
        background-position: left -66px;
    }

    .m-pbar .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 4px;
        height: 11px;
        background-position: 0 -46px;
    }

    .m-pbar .btn {
        position: absolute;
        top: -7px;
        right: -13px;
        width: 22px;
        height: 24px;
        margin-left: -11px;
        background: url(../assets/iconall.png);
        background-position: 0 -250px;
    }

    .m-pbar .btn:hover {
        background-position: 0 -280px;
        _background-position: 0 0;
    }

    .m-pbar .btn i {
        visibility: hidden;
        position: absolute;
        left: 5px;
        top: 5px;
        width: 12px;
        height: 12px;
        // background: url(../assets/loading.gif);
    }

    .m-pbar .z-load:hover {
        background-position: 0 -250px;
        _background-position: 0 0;
        cursor: default;
    }

    .m-pbar .z-load i {
        visibility: visible;
        cursor: default;
    }

    .m-pbar .time {
        margin-top: 4px;
        margin-left: 20px;
        display: block;
        // position: absolute;
        // top: -3px;
        // right: -84px;
        color: #797979;
        text-shadow: 0 1px 0 #121212;
    }

    .m-pbar .time em {
        color: #a1a1a1;
    }
</style>